<template>
  <div>
    <a-row justify="center">
      <a-col :span="22">
        <div class="content">
          <div class="hello">
            <span>行</span>
            <span>以</span>
            <span>致</span>
            <span>远</span>
          </div>
          <div class="hello two">
            <span>不</span>
            <span>忘</span>
            <span>初</span>
            <span>心</span>
          </div>
        </div>
        <div style="text-align: center;margin-top:135px">
          <a-button type="link" size="large" @click="naviTo" style="color: black; font-size: 20px">登录</a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { Row, Col, Button } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { checkToken } from '@/utils/check'

export default defineComponent({
  name: 'HelloWorld',
  components: {
    ARow: Row,
    ACol: Col,
    AButton: Button
  },
  setup () {
    const router = useRouter()
    const naviTo = () => {
      router.push({ name: 'login' })
    }
    onMounted(() => {
      const t = checkToken()
      if (t !== '') {
        router.replace({ path: '/work' })
      }
    })
    return {
      naviTo
    }
  }
})
</script>

<style scoped>
.content {
  margin-top: 30px;
  padding: 20px 0;
  text-align: center;
  font-family: KaiTi, FangSong,serif;
}

.two {
  position: relative;
  top: 138px;
}
.hello {
  width: 90px;
  line-height: 100px;
  font-size: 60px;
  font-weight: bold;
  display: inline-block;
}

@keyframes w {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.w1 {
  animation: w 1s ease;
}
.w2 {
  animation: w 3s ease;
}
.not-show {
  visibility: hidden;
}
</style>
